<template>
  <div class="home-wrapper">
    <!-- <home-header :city="city"></home-header> -->
    <home-header ></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconsList="iconsList"></home-icons>
    <home-guess-you-like :guessYouLikeList="guessYouLikeList"></home-guess-you-like>
    <home-week-go-where :weekendList="weekendList"></home-week-go-where>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeGuessYouLike from './components/GuessYouLIke'
import HomeWeekGoWhere from './components/WeekGoWhere'

export default {
  name: 'Home',
  components: {
    //属性 用短横线的方式命名, 如果用大驼峰, 那么会报错,↓
    // Uncaught RangeError: Maximum call stack size exceeded,
    // 所以要用短横线的方式命名
    'home-header': HomeHeader,
    'home-swiper': HomeSwiper,
    'home-icons': HomeIcons,
    'home-guess-you-like': HomeGuessYouLike,
    'home-week-go-where': HomeWeekGoWhere
  },
  data:function() {
    return {
      lastCity: '',
      city: '',
      swiperList: [],
      iconsList: [],
      guessYouLikeList: [],
      weekendList: []
    }
  },
  computed: {
    ...mapState({
      curCity: 'city'
    })
  },
  methods: {
    getHomeInfo:function() {
      // axios接收到数据会用promise返回,   如果有不同的城市, 那么就不会keep-alive而是重发一个新的请求
      // 需要判断这次和上次是否一样
      // 最后的数据是直接从服务器上拿的, 所以要写/api(/api其实是一个指代, 比如可以是/baiduAPi  /txAPi等等)
      // 其实可以用相对地址的可以, 拿我这个项目的配置去看
      axios.get("./mock/index.json?city=" + this.curCity)
        .then(this.getHomeInfoSuccess)
    },
    getHomeInfoSuccess:function(res) {
      var data = res.data.data;
      // ret是返回数据中的一个字段，表示是否后端正常相应，true正常，false不正常
      if (res.data.ret && data) {
        // this.city = data.city;
        this.swiperList = data.swiperList;
        this.iconsList = data.iconsList;
        this.guessYouLikeList = data.guessYouLikeList;
        this.weekendList = data.weekendList;
      }
    }
  },
  mounted:function() {
    this.lastCity = this.curCity;
    this.getHomeInfo();
  },
  activated: function() {
    // keep-alive时, mounted不会打印了 , 而activated还会打印
    if (this.lastCity !== this.curCity) {
      this.lastCity = this.curCity;
      this.getHomeInfo();
    }
    console.log('activated')
    // 在这个里面做
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

/* 修改a的样式其实就是修改 router-link的样式 */


</style>
